<!--
 * @Author: 秦福凯
 * @Date: 2024-08-20 15:04:11
 * @Description: 导入组件
 * @FilePath: \sx-school-oa\src\components\common\importFile\importFile.vue
-->

<template>
  <u-dialog title="文件导入" :hideBtns="['confirm']" class="u-common-fileUpload-com" v-loading="importLoading">
    <slot name="text"></slot>
    <p class="u-ipm-dia-p">1.点击下载导入模板下载“导入模板”文件</p>
    <div>
      <el-button color="#626aef" icon="UploadFilled" @click="emits('dowmLoadFile',)" size="small">下载导入模板</el-button>
      <p class="u-ipm-dia-p">2.导入的文件格式为.xls,.xlsx</p>
      <el-upload
        v-loading="dialogLoading"
        class="u-form-upload"
        action="#"
        :on-change="fileimport"
        accept=".xls,.xlsx"
        :show-file-list="false"
        :auto-upload="false"
        drag
        >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          点击上传框或拖动文件进行上传
        </div>
        </el-upload>
    </div>
  </u-dialog>
</template>

<script setup>
import { ref, reactive, defineProps, defineEmits} from 'vue'

 let props = defineProps({
  importLoading:Boolean,
 })
 let emits = defineEmits(['dowmLoadFile','fileimport',])

 function fileimport(file,list,){
  emits('fileimport',file,)
  }
</script>
<style lang='scss' scoped>
  .u-common-fileUpload-com{
    .u-ipm-dia-p{
      color: red;
      line-height: 32px;
    }
  }
</style>